<template>
	<div>
		<div class="details">
			<h2 class="de-title">html</h2>
			<div class="info">
				<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" /><span class="ava">向元浩</span><span class="time"><Icon type="ios-clock-outline"></Icon>2017-12-16</span><span class="reader"><Icon type="eye"></Icon>阅读:(121)</span><span class="conmpont"><Icon type="ios-compose-outline"></Icon>评论:(11)</span></div>
			<div class="text">“div+CSS”可以说是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。 WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推广的时候，重点是说站点的“换肤”、“改版”功能，这个对于初接触CSS布局和喜欢个性化的同学来说有一定的吸引力，这也是为了更好的推广WEB标准。感觉现在（样式布局对SEO的优化）SEO被越来越多的人所关注，特别是用来说服领导支持使用WEB标准。做为推广WEB标准的一种方式，我并不反对，但往往推广者本身并不能理解WEB标准，以SEO为目的推广WEB标准，虽然都是推广了WEB标准，但所产生的影响并不见得是积极的。SEO所使用的一些方法跟WEB标准是
			</div>
		</div>
		<div class="conment">
			<p class="total">评论 <span>一共11条</span></p>
			<!--<div class="message">你还没有登录，请先登录！</div>-->
			<div>
				<div class="formcon">
					<textarea></textarea>
					<button class="submit">提交</button>
				</div>
				<div class="commontList">
					<div class="commentBox">
						<div class="messinfo">
							<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" /><span class="ava">向元浩</span>
							<span class="times">2017-12-16</span>
						</div>
						<div class="commess">
							是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。 WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推
						</div>
					</div>
					<div class="commentBox">
						<div class="messinfo">
							<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" /><span class="ava">向元浩</span>
							<span class="times">2017-12-16</span>
						</div>
						<div class="commess">
							是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。 WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推
						</div>
					</div>

					<div class="page">
						<Page :total="100" size="small"></Page>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'detail',
		data() {
			return {}
		}
	}
</script>
<style>
	.details {
		background: #fff;
		padding-top: 10px;
	}
	
	.de-title {
		text-align: center;
		font-size: 36px;
	}
	
	.details .info {
		text-align: center;
		height: 36px;
		line-height: 36px;
		font-size: 14px;
	}
	
	.info .ivu-avatar {
		top: -2px;
		margin-right: 5px;
	}
	
	.info .ivu-icon {
		font-size: 12px;
		padding-right: 5px;
	}
	
	.ava {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
	}
	
	.time,
	.conmpont,
	.reader {
		color: #999;
		font-size: 12px;
		padding-left: 20px;
	}
	
	.details .text {
		margin-top: 10px;
		font-size: 14px;
		color: #444;
		padding: 0 30px;
		text-indent: 30px;
		line-height: 36px;
	}
	
	.conment {
		margin-top: 10px;
		background: #fff;
		padding: 20px;
	}
	
	.total {
		line-height: 30px;
		font-size: 18px;
		font-weight: 600;
	}
	
	.total span {
		float: right;
		font-size: 12px;
		font-weight: 400;
	}
	
	.message {
		height: 40px;
		line-height: 40px;
		background: #f76447;
		text-align: center;
		color: #fff;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	textarea {
		float: left;
		padding: 10px;
		width: 634px;
		height: 71px;
		border: 1px solid #ccc;
		border-right: 0;
		outline: 0;
		resize: none;
	}
	
	.submit {
		margin-top: -1px;
		float: left;
		padding: 10px;
		width: 76px;
		height: 72px;
		background: #1F89bf;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
		border: none
	}
	
	.formcon {
		margin-top: 20px;
	}
	
	.formcon:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	
	.commontList {
		margin-top: 20px;
	}
	
	.messinfo {
		height: 30px;
		line-height: 30px;
	}
	
	.times {
		float: right;
	}
	
	.commess {
		font-size: 12px;
		line-height: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	.page {
		margin-top: 20px;
		background: #fff;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 20px;
	}
</style>